<template>
  <div class="all">
    <div class="outside">
      <div class="inside">
        <!-- 基于人工智能的智能云相册分享平台 -->
        <p>
          <img src="../assets/pngImg/小鸡.png" alt="" /><span
            >基于人工智能的智能云相册分享平台</span
          >
        </p>
        <center v-loading="loading">
          <reset @registerSuccess="registerSuccess" v-if="isRegister"></reset>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            v-else
          >
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass"></el-input>
            </el-form-item>
            <el-form-item class="buttons">
              <el-button type="primary" @click="loginIn">登录</el-button>
              <el-button @click="resetForm()">注册</el-button>
            </el-form-item>
          </el-form>
        </center>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/bus/bus.js";
import reset from "@/components/login/resetUser.vue";
import pngLogo from "@/assets/pngImg/小鸡.png";
export default {
  components: {
    reset,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validateUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      let patter = /^[a-zA-Z0-9_-]{4,16}$/; //用户名云端验证
      setTimeout(() => {
        if (!patter.test(value)) {
          callback(new Error(" 4到16位（字母，数字，下划线, 横杠)"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      loading: false,
      isRegister: false,
      ruleForm: {
        username: "diaoge",
        pass: "123456",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validateUser, trigger: "blur" }],
      },
    };
  },
  methods: {
    //返回登录
    backLoin() {},
    loginIn() {
      //登录
      // let data = {
      // 	UserName:this.ruleForm.username,
      // 	password:this.ruleForm.pass
      // }

      let Cdata = this.$userClass.Clogin(
        this.ruleForm.username,
        this.ruleForm.pass
      );
      this.$http
        .post("/auth/login", Cdata)
        .then((res) => {
          this.$message({
            type: "success",
            message: "登录成功！",
          });
          let Ddata = this.$userClass.Dlogin(res.data);
          //录入cooke
          document.cookie = "userId=" + Ddata.userId;
          document.cookie = "token=" + Ddata.token;
          document.cookie = "userName=" + this.ruleForm.username;
          Ddata.userName = this.ruleForm.username;
          console.log(Ddata);
          this.$store.commit("updataUserData", Ddata);
          //加赞用户头像
          this.getUserData();
          this.$http.defaults.headers[
            "Authorization"
          ] = this.$store.state.token;
          bus.$emit("loading");
          this.$router.push("/home");
        })
        .catch((err) => {
          if (err.response.status == "400") {
            this.$message.error(err.response.data);
          } else {
            this.$message.error("网络错误！");
          }
          console.log(err.response.status);
        });
    },
    resetForm() {
      this.loading = true;
      let that = this;
      setTimeout(() => {
        that.loading = false;
        that.isRegister = true;
      }, 1000);
    },
    registerSuccess() {
      this.loading = true;
      let that = this;
      setTimeout(() => {
        that.loading = false;
        this.isRegister = false;
      }, 1000);
    },
    getUserData() {
      this.$http
        .get("/api/user?userId=" + this.$store.state.userId)
        .then((res) => {
          document.cookie = "coverPath=" + res.data.userCoverPath;
          this.$store.commit("updataCoverPath", res.data.userCoverPath);
        });
    },
  },
};
</script>

<style scoped="scoped">
.all {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/pngImg/u2.jpg);
}
.outside,
.inside {
  width: 90%;
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
}
center {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 30px;
  padding-top: 50px;
  box-sizing: border-box;
  text-align: center;
}
.inside {
  width: 40%;
  height: 80%;
  background: none;
  border-radius: 0;
}
.inside > p {
  margin-top: 30px;
  text-align: center;
  font-size: 26px;
  width: 100%;
}
.inside > p img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-right: 10px;
}
.inside > p span {
  vertical-align: middle;
  color: #06550f;
  font-weight: 600;
}
.el-form-item {
  margin-bottom: 50px;
  margin-top: 34px;
  margin-left: -28px;
  width: 95%;
}
.el-button + .el-button {
  margin-left: 50px;
}
</style>
